<template>
  <div class="enterprise-home-bg">
    <!-- 语言切换按钮 -->
    <div class="language-switch-container">
      <el-dropdown @command="changeLang">
        <span class="language-switch">
          {{ $i18n.locale === 'zh' ? '中文' : 'English' }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="zh">中文</el-dropdown-item>
            <el-dropdown-item command="en">English</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    
    <div class="enterprise-banner">
      <h2>{{ $t('enterpriseHome.title') }}</h2>
      <p>{{ $t('enterpriseHome.subtitle') }}</p>
    </div>
    <el-row :gutter="32" class="enterprise-entry-row">
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover" class="enterprise-entry-card">
          <el-icon><UserFilled /></el-icon>
          <h3>{{ $t('enterpriseHome.certification.title') }}</h3>
          <p>{{ $t('enterpriseHome.certification.description') }}</p>
          <router-link to="/enterprise/certification">
            <el-button type="primary" round>{{ $t('enterpriseHome.certification.button') }}</el-button>
          </router-link>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover" class="enterprise-entry-card">
          <el-icon><OfficeBuilding /></el-icon>
          <h3>{{ $t('enterpriseHome.companyInfo.title') }}</h3>
          <p>{{ $t('enterpriseHome.companyInfo.description') }}</p>
          <router-link to="/enterprise/info">
            <el-button type="success" round>{{ $t('enterpriseHome.companyInfo.button') }}</el-button>
          </router-link>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover" class="enterprise-entry-card">
          <el-icon><Edit /></el-icon>
          <h3>{{ $t('enterpriseHome.postDemand.title') }}</h3>
          <p>{{ $t('enterpriseHome.postDemand.description') }}</p>
          <router-link to="/enterprise/post">
            <el-button type="warning" round>{{ $t('enterpriseHome.postDemand.button') }}</el-button>
          </router-link>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover" class="enterprise-entry-card">
          <el-icon><List /></el-icon>
          <h3>{{ $t('enterpriseHome.manageDemand.title') }}</h3>
          <p>{{ $t('enterpriseHome.manageDemand.description') }}</p>
          <router-link to="/enterprise/demand">
            <el-button type="info" round>{{ $t('enterpriseHome.manageDemand.button') }}</el-button>
          </router-link>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover" class="enterprise-entry-card">
          <el-icon><User /></el-icon>
          <h3>{{ $t('enterpriseHome.talentSearch.title') }}</h3>
          <p>{{ $t('enterpriseHome.talentSearch.description') }}</p>
          <router-link to="/enterprise/talent-search">
            <el-button type="primary" round>{{ $t('enterpriseHome.talentSearch.button') }}</el-button>
          </router-link>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover" class="enterprise-entry-card">
          <el-icon><Connection /></el-icon>
          <h3>{{ $t('enterpriseHome.applicationManagement.title') }}</h3>
          <p>{{ $t('enterpriseHome.applicationManagement.description') }}</p>
          <router-link to="/enterprise/applications">
            <el-button type="success" round>{{ $t('enterpriseHome.applicationManagement.button') }}</el-button>
          </router-link>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { UserFilled, OfficeBuilding, Edit, List, User, Connection } from '@element-plus/icons-vue';

export default {
  components: { UserFilled, OfficeBuilding, Edit, List, User, Connection },
  mounted() {
    // 初始化语言设置
    const savedLang = localStorage.getItem('lang')
    if (savedLang && ['zh', 'en'].includes(savedLang)) {
      this.$i18n.locale = savedLang
    } else {
      // 根据浏览器语言自动设置
      const browserLang = navigator.language.toLowerCase()
      if (browserLang.startsWith('zh')) {
        this.$i18n.locale = 'zh'
      } else {
        this.$i18n.locale = 'en'
      }
      localStorage.setItem('lang', this.$i18n.locale)
    }
  },
  methods: {
    // 语言切换
    changeLang(lang) {
      this.$i18n.locale = lang
      localStorage.setItem('lang', lang)
    }
  }
};
</script>

<style scoped>
.enterprise-home-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
  padding-bottom: 40px;
  position: relative;
}

/* 语言切换容器 */
.language-switch-container {
  position: fixed;
  top: 20px;
  right: 40px;
  z-index: 100;
}

.language-switch {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  transition: all 0.3s;
  font-size: 14px;
  color: #333;
}

.language-switch:hover {
  background: rgba(255, 255, 255, 1);
  border-color: #67c23a;
  color: #67c23a;
}
.enterprise-banner {
  background: linear-gradient(90deg, #67c23a 60%, #409eff 100%);
  color: #fff;
  padding: 48px 0 32px 0;
  text-align: center;
  border-radius: 0 0 24px 24px;
}
.enterprise-banner h2 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  font-weight: bold;
}
.enterprise-banner p {
  font-size: 1.1rem;
  opacity: 0.95;
}
.enterprise-entry-row {
  margin: 40px auto 0 auto;
  max-width: 1100px;
}
.enterprise-entry-card {
  text-align: center;
  min-height: 220px;
  border-radius: 16px;
  transition: box-shadow 0.2s;
}
.enterprise-entry-card .el-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #67c23a;
}
</style>